﻿<!DOCTYPE html>
<html>
<head>
    <title>ol-point-category</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.css">
    <style>
        html, body, #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.js"></script>
<script src="../../build/mapv.js"></script>
<script>

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        layerName: 'baseLayer',
        preload: 4,
        source: new ol.source.OSM({
          url: 'http://{a-e}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'
        })
      })
    ],
    loadTilesWhileAnimating: true,
    pixelRatio: 1,
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [-102.17609405517578, 34.41583177128595],
      zoom: 5
    })
  });

  var randomCount = 300;
  var data = [];
  while (randomCount--) {
    data.push({
      geometry: {
        type: 'Point',
        coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]
      },
      count: parseInt(4 * Math.random())
    });
  }

  var dataSet = new mapv.DataSet(data);

  var options = {
    splitList: {
      other: 'white',
      1: 'blue',
      2: 'yellow',
      3: 'red'
    },
    size: 2,
    max: 30,
    draw: 'category',
    projection: 'EPSG:4326',
    methods: {
      click: function (event) {
        console.log(event)
      },
      mousemove: function (event) {
        if (event) {
          mapvLayer.setDefaultCursor('pointer', event)
        } else {
          mapvLayer.setDefaultCursor('default', event)
        }
      }
    }
  };

  var mapvLayer = new mapv.OpenlayersLayer(map, dataSet, options);

</script>
</body>
</html>
